<template>
    <div class="map-container" id="map">

    </div>
</template>
<script>
    import echarts from "echarts";
    function getPar(par){
        //获取当前URL
        var local_url = document.location.href;
        //获取要取得的get参数位置
        var get = local_url.indexOf(par +"=");
        if(get == -1){
            return false;
        }
        //截取字符串
        var get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        var nextPar = get_par.indexOf("&");
        if(nextPar != -1){
            get_par = get_par.slice(0, nextPar);
        }
        return get_par;
    }

    export default {
        data(){
            return {

            }
        },
        mounted(){

            this.getRecord()

        },
        methods:{

            getRecord:function(){
                axios
                    .get("../../admin/record?logId="+getPar('logId'))
                    .then(response => (

                        this.showMap(response.data.data)
                    ))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            showMap:function(data){
                var xdata = [];
                for(var len=data[0].length, i=0;i<len;i++){
                    xdata.push(i);
                }

                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['A','B','C','D','E','F']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data:xdata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom:[{
                        type:"inside"         //详细配置可见echarts官网
                    }],
                    series: [
                        {
                            name:'A',
                            type:'line',
                            data:data[0]
                        },
                        {
                            name:'B',
                            type:'line',
                            data:data[1]
                        },
                        {
                            name:'C',
                            type:'line',
                            data:data[2]
                        },
                        {
                            name:'D',
                            type:'line',
                            data:data[3]
                        },
                        {
                            name:'E',
                            type:'line',
                            data:data[4]
                        },
                        {
                            name:'F',
                            type:'line',
                            data:data[5]
                        }
                    ]
                };
                console.log(option)
                var map = echarts.init(document.getElementById('map'));
                map.setOption(option)
            }
        }

    }
</script>